<template>
  <div>
    <div>
      患者姓名
      <el-select
        v-model="customer.id"
        size="small"
        style="width:150px"
        v-on:change="selectCustomerById"
      >
        <el-option
          size="small"
          v-for="bean in customerList"
          :label="bean.name"
          :value="bean.id"
          :key="bean.id"
        >{{bean.name}}</el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
      患者卡号
      <el-input v-model="customer.cardid" placeholder="卡号" size="small" style="width:150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      患者年龄
      <el-input v-model="customer.age" size="small" style="width:150px"></el-input>岁&nbsp;&nbsp;&nbsp;&nbsp;
      出生日期
      <el-date-picker v-model="customer.bdate" size="small" style="width:150px"></el-date-picker>
      <br />患者性别
      <el-select v-model="customer.sex" size="small" style="width:150px">
        <el-option
          size="small"
          v-for="bean in sexList"
          :label="bean.name"
          :value="bean.id"
          :key="bean.id"
        >{{bean.name}}</el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
      手机号码
      <el-input v-model="customer.phone" placeholder="手机号码" size="small" style="width:150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      证件号码
      <el-input v-model="customer.zhengid" placeholder="证件号码" size="small" style="width:150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      接诊类型
      <el-select v-model="customer.state" size="small" style="width:150px">
        <el-option
          size="small"
          v-for="bean in stateList"
          :label="bean.name"
          :value="bean.id"
          :key="bean.id"
        >{{bean.name}}</el-option>
      </el-select>
      <br />患者地址
      <el-input v-model="customer.address" placeholder="北京" size="small" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      详细地址
      <el-input v-model="customer.xaddress" placeholder="请输入详细地址" size="small" style="width:300px"></el-input>
      <br />诊断
      <el-input v-model="customer.xaddress" placeholder="请输入详细地址" size="small" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      医嘱
      <el-input v-model="customer.name" size="small" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button @click="add()" type="primary" size="small">保存患者信息</el-button>
    </div>
    <br />
    <br />

    <div style="float: left">
      <h1 style="color:red">RP</h1>
      <div style="width:900px">
        <el-table :data="RPList" style="width: 100%;height:400px" border>
          <el-table-column align="center" type="index" width="50" label="序号" fixed="left"></el-table-column>
          <el-table-column prop="name" label="名称" width="100"></el-table-column>
          <el-table-column label="单次用量" width="120">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.tnum"
                size="small"
                style="width:100px"
                v-on:change="pinchange(scope.row)"
                :min="1"
                :max="10"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="用法" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fa" size="small" style="width:100px">
                <el-option
                  size="small"
                  v-for="bean in faList"
                  :label="bean.name"
                  :value="bean.id"
                  :key="bean.id"
                >{{bean.name}}</el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="频度" width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pin"
                size="small"
                style="width:100px"
                v-on:change="pinchange(scope.row)"
              >
                <el-option
                  size="small"
                  v-for="bean in pinList"
                  :label="bean.name"
                  :value="bean.id"
                  :key="bean.id"
                >{{bean.name}}</el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="天数" width="100px">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.day"
                size="small"
                style="width:60px"
                v-on:change="pinchange(scope.row)"
              >
                <el-option
                  size="small"
                  v-for="bean in dayList"
                  :label="bean.name"
                  :value="bean.id"
                  :key="bean.id"
                >{{bean.name}}</el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="总量" width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tsum" size="small" style="width:50px"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="50"></el-table-column>
          <el-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.$index,scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-select v-model="doctorid">
          <el-option
            size="small"
            v-for="bean in doctorList"
            :label="bean.name"
            :value="bean.id"
            :key="bean.id"
          >{{bean.name}}</el-option>
        </el-select>
        <el-button @click="save()" type="primary" size="small">保存</el-button>
        <el-button @click="shou()" type="success" size="small">收费</el-button>
        <el-button @click="zong()" type="primary" size="small">费用计算</el-button>共计：
        <span style="color:red">{{sumprice}}</span>元
      </div>
    </div>

    <div style="float: right">
      药品分类
      <el-select v-model="tid" size="small" style="width:150px" v-on:change="selectMedicById">
        <el-option
          size="small"
          v-for="bean in typeList"
          :label="bean.name"
          :value="bean.id"
          :key="bean.id"
        >{{bean.name}}</el-option>
      </el-select>
      <el-input v-model="name" placeholder="输入药品名称" size="small" style="width:200px"></el-input>
      <el-button type="primary" size="small" v-on:click="selectMedicByName()">搜索</el-button>
      <div style="height:300px;width:500px">
        <el-table
          :data="medicList"
          style="width: 100%;height:500px"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column align="center" type="index" width="50" label="序号" fixed="left"></el-table-column>
          <el-table-column prop="name" label="名称" width="150"></el-table-column>
          <el-table-column prop="size" label="规格" width="100"></el-table-column>
          <el-table-column prop="kc" label="库存" width="80"></el-table-column>
          <el-table-column prop="price" label="价格" width="70"></el-table-column>
        </el-table>
        <el-button type="primary" size="small" @click="addMedic">添加药品</el-button>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  methods: {
    add() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/nacos/tCustomer/add",
        params: $this.customer
      }).then(function(res) {
        if (res.data.code == 200) {
          alert("患者信息保存成功");
        }
      });
    },
    getCustomerList() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/nacos/tCustomer/customerList"
      }).then(function(res) {
        $this.customerList = res.data.obj;
      });

      this.axios({
        method: "post",
        url: "http://localhost:9999/nacos/tCustomer/getTypeList"
      }).then(function(res) {
        $this.typeList = res.data.obj;
      });

      this.axios({
        method: "post",
        url: "http://localhost:9999/nacos/tCustomer/getDoctorList"
      }).then(function(res) {
        $this.doctorList = res.data.obj;
      });
    },
    selectCustomerById() {
      var $this = this;
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/nacos/tCustomer/selectCustomerById?id=" +
          $this.customer.id
      }).then(function(res) {
        $this.customer = res.data.obj;
      });
    },
    selectMedicById() {
      var $this = this;
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/nacos/tCustomer/selectMedicById?id=" +
          $this.tid
      }).then(function(res) {
        $this.medicList = res.data.obj;
      });
    },
    selectMedicByName() {
      var $this = this;
      this.axios({
        method: "post",
        url:
          "http://localhost:9999/nacos/tCustomer/selectMedicByName?name=" +
          $this.name
      }).then(function(res) {
        $this.medicList = res.data.obj;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addMedic() {
      var $this = this;
      for (var i = 0; i < $this.multipleSelection.length; i++) {
        var tmp = $this.multipleSelection[i];
        $this.RPList.push(tmp);
      }
    },
    deleteRow(index, row) {
      var $this = this;
      $this.RPList.splice(index, 1);
    },
    pinchange(row) {
      row.tsum = row.pin * row.day * row.tnum;
    },
    zong() {
      var $this = this;
      $this.sumprice = 0;
      for (var i = 0; i < $this.RPList.length; i++) {
        var a = 0;
        var tmp = $this.RPList[i];
        a = tmp.tsum * tmp.price;
        $this.sumprice = $this.sumprice + a;
      }
    },
    save() {
      var $this = this;
      var torderList = [];
      for (var i = 0; i < $this.RPList.length; i++) {
        var a = 0;
        var tmp = $this.RPList[i];
        var tmp1 = {};
        tmp1.m = tmp.tsum;
        tmp1.medicId = tmp.id;
        tmp1.m1 = tmp.price * tmp.tsum;
        torderList.push(tmp1);
      }

      this.axios({
        method: "post",
        url:
          "http://localhost:9999/nacos/tCustomer/save?sumprice=" +
          $this.sumprice +
          "&customerId=" +
          $this.customer.id +
          "&doctorid=" +
          $this.doctorid +
          "&jzstatus=" +
          $this.customer.state,
        data: torderList
      }).then(function(res) {
        if (res.data.code == 200) {
          alert("保存成功");
        }
      });
    },
    shou() {
      var $this = this;
      $this.$router.push({
        name: "Fei"
      });
    }
  },
  data() {
    return {
      customerList: [],
      customer: {},
      medicList: [],
      sumprice: 0,
      RPList: [],
      doctorid: "",
      doctorList: [],
      pin: "",
      multipleSelection: [],
      name: "",
      tid: "",
      stateList: [
        {
          id: 1,
          name: "初诊"
        },
        {
          id: 2,
          name: "复诊"
        }
      ],
      pinList: [
        {
          id: 1,
          name: "一天一次"
        },
        {
          id: 2,
          name: "一天两次"
        },
        {
          id: 3,
          name: "一天三次"
        },
        {
          id: 4,
          name: "一天四次"
        }
      ],
      dayList: [
        {
          id: 1,
          name: "1"
        },
        {
          id: 2,
          name: "2"
        },
        {
          id: 3,
          name: "3"
        },
        {
          id: 4,
          name: "4"
        },
        {
          id: 5,
          name: "5"
        },
        {
          id: 6,
          name: "6"
        },
        {
          id: 7,
          name: "7"
        }
      ],
      faList: [
        {
          id: 1,
          name: "口服"
        },
        {
          id: 2,
          name: "静脉注射"
        },
        {
          id: 3,
          name: "注射药物"
        },
        {
          id: 4,
          name: "检查"
        },
        {
          id: 5,
          name: "皮试"
        },
        {
          id: 6,
          name: "外用"
        },
        {
          id: 7,
          name: "雾化"
        }
      ],
      sexList: [
        {
          id: 0,
          name: "未知"
        },
        {
          id: 1,
          name: "男"
        },
        {
          id: 2,
          name: "女"
        }
      ],
      typeList: []
    };
  },
  mounted() {
    this.getCustomerList();
  }
};
</script>
